﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UploadPage.aspx.cs" Inherits="CommonPages_UploadPage" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
            font-size: 12px;
            text-decoration: none;
        }
        .products
        {
            width: 560px;
            margin: 50px auto;
        }
        .products li
        {
            width: 110px;
            height: 154px;
            float: left;
            margin-left: 30px;
            display: inline;
        }
        .products li a
        {
            display: block;
        }
        .products li a img
        {
            border: 1px solid #666;
            padding: 1px;
        }
        .products li span a
        {
            width: 110px;
            height: 30px;
            line-height: 24px;
            text-align: center;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
    </style>
    <script type="text/javascript" >

        function addImage(url, filename) {
            var ul = document.getElementById("imageList");
            var li = document.createElement("li");
            var a_del = document.createElement("a");
            a_del.href = "javascript:void(0);";
            a_del.innerHTML = "移除";
            var span = document.createElement("span");
            span.appendChild(a_del);

            var a_Open = document.createElement("a");
            a_Open.href = "javascript:void(0);";
            a_del.onclick = function() {
                ul.removeChild(li);
            };
            var img = document.createElement("img");
            img.alt = filename || "";
            img.onload = function() { AutoResizeImage(100, 79, this); }
            a_Open.appendChild(img);
            li.appendChild(a_del);
            li.appendChild(a_Open);
            ul.appendChild(li);
            img.src = url;
        }

        function AutoResizeImage(maxWidth, maxHeight, objImg) {
            var hRatio;
            var wRatio;
            var Ratio = 1;
            var w = objImg.width;
            var h = objImg.height;
            wRatio = maxWidth / w;
            hRatio = maxHeight / h;
            if (maxWidth == 0 && maxHeight == 0) {
                Ratio = 1;
            } else if (maxWidth == 0) {
                if (hRatio < 1) Ratio = hRatio;
            } else if (maxHeight == 0) {
                if (wRatio < 1) Ratio = wRatio;
            } else if (wRatio < 1 || hRatio < 1) {
                Ratio = (wRatio <= hRatio ? wRatio : hRatio);
            }
            if (Ratio < 1) {
                w = w * Ratio;
                h = h * Ratio;
            }
            objImg.height = h;
            objImg.width = w;
        }

        function addClick() {
            var url = document.getElementById("ttt").value;
            addImage(url, "");
        }
        
    </script>
    
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" AjaxViewStateMode="Enabled" />
    <ext:Viewport ID="Viewport1" runat="server">
        <Content>
            <ext:BorderLayout ID="BorderLayout1" runat="server">
                <Center>
                    <ext:Panel ID="Panel1" runat="server" BodyBorder="false" Layout="RowLayout">
                        <TopBar>
                            <ext:Toolbar ID="Toolbar1" runat="server">
                                <Items>
                                    <ext:Button runat="server" ID="extBtn_Send" Text="完成并发送" Icon="ArrowTurnRight" >
                                        <Listeners>
                                            <Click Handler="SendClick(0);" />
                                        </Listeners>
                                    </ext:Button>
                                </Items>
                            </ext:Toolbar>
                        </TopBar>
                        <Content>
                            
                        
                        </Content>
                    </ext:Panel>
                </Center>
            </ext:BorderLayout>
        </Content>
    </ext:Viewport>
    <div class="">
        <button onclick="addClick();" type="button" >添加</button>
        <input type="file" id="ttt" />
        <ul class="products" id="imageList" >
        </ul>
        <iframe id="uploadFrom" width="0" height="0" ></iframe>
    </div>
    </form>
</body>
</html>
